<template>
  <view class="page-container">
    <HeaderBar
        title="详情"
        navBarBgc="linear-gradient(180deg, rgba(186,209,194,1) 0%, rgba(207,223,212,1) 33%, rgba(230,238,233,1) 100%);"
    ></HeaderBar>
    <view class="content-container">
      <view
          class="swiper-container"
          v-if="providerInfoObj.pictures && providerInfoObj.pictures.length > 0"
      >
        <wd-swiper
            :list="providerInfoObj.pictures"
            height="156.5"
            value-key="imgUrl"
            custom-image-class="custom-image"
            autoplay
        ></wd-swiper>
      </view>
      <view class="provider-info-container">
        <view class="provider-info-header flex items-center justify-between">
          <view class="provider-name">{{providerInfoObj.name}}</view>
          <view class="flex items-center">
            <wd-icon name="service" size="25px" color="#1b9c61"></wd-icon>
            <text class="ml10 fs12-half" @click="handlerCallPhone">联系商家</text>
          </view>
        </view>
        <view class="provider-address">
          {{providerInfoObj.description}}
        </view>
        <view class="provider-facility-container flex justify-between items-center">
          <view class="left-container">
            <view class="provider-business-time">
              {{providerInfoObj.openingHours}}
            </view>
            <view class="service-container flex">
              <view
                  class="service-item"
                  v-for="(item,index) in facilityList"
                  :key="index"
              >
                {{item.name}}
              </view>
            </view>
          </view>
          <view class="right-container flex items-center" @click="handleNavQualification">
            <text class="fs12-half">商家资质</text>
            <wd-icon name="chevron-right" size="20px"></wd-icon>
          </view>
        </view>
        <view class="map-container">
          <view class="location-container flex justify-around items-center" @click="handlerOpenMap">
            <view class="left-container flex items-center">
              <i class="iconfont icon-a-jinrudituquandidingweiweizhi"></i>
              <text>地图</text>
            </view>
            <view class="right-container">
              {{providerInfoObj.address}}
            </view>
          </view>
        </view>
      </view>
      <view class="product-container">
        <view class="title">团购套餐</view>
        <view class="product-list" v-if="productList && productList.length > 0">
          <view
              v-for="(item,index) in productList"
              :key="index"
              class="product-item"
          >
            <image
                class="product-img"
                :src="item.headImageUrl"
                :lazy-load="true"
                @click="handlePreviewProductImgList(item)"
            ></image>
            <view class="product-info-container flex flex-1 flex-col justify-between">
              <view class="product-basic-info">
                <view class="product-name">
                  {{item.name}}
                </view>
                <view class="product-service-container" v-show="item.tagLabelList && item.tagLabelList.length">
                  <view class="product-service-item">
                    <text v-for="(tagLabelItem,tagLabelIndex) in item.tagLabelList">
<!--                      到店使用 I 随买随用 I 随时退-->
                      {{tagLabelItem.name}}
                      <text v-if="tagLabelIndex !== item.tagLabelList.length -1">I</text>
                    </text>
                  </view>
                </view>
              </view>
              <view class="product-price-container flex justify-between items-center">
                <view class="price-container flex items-baseline">
                  <view class="sale-price">{{ item.negotiatedPrice }}</view>
                  <view class="market-price ml10" v-if="item.price">{{ item.price }}</view>
                </view>
                <view class="buy-btn" @click="navReservation(item)">抢购</view>
              </view>
            </view>
          </view>
        </view>
        <wd-status-tip v-else image="content" tip="暂无产品" />
      </view>
    </view>
  </view>
</template>

<script setup>
  import HeaderBar from "@/components/HeaderBar/index.vue";
  import {foodProductList, foodProviderDetail} from "@/api/food";
  import {commonWordList} from "@/api/system";
  import {useCommonData} from "@/hook/useCommonData";

  const facilityList = ref([]);
  const providerId = ref("");
  const productList = ref([]);
  const providerInfoObj = ref({});

  const queryProviderTags = async () => {
    await commonWordList({keys:"RESTAURANT_TAG"}).then(res => {
      let {RESTAURANT_TAG} = res.result;
      facilityList.value = [];
      let tagList = [];
      if(providerInfoObj.value.tags && providerInfoObj.value.tags.length > 0) {
        RESTAURANT_TAG.forEach(item => {
          providerInfoObj.value.tags.forEach(tagItem => {
            if(Number(item.code) === tagItem.code) {
              tagList.push(item);
            }
          });
        })
        facilityList.value = tagList;
      }
      console.log(facilityList,'facilityList');
    });
  };
  const queryProductTags = async (_productList) => {
    await commonWordList({keys:"RESTAURANT_COMBO_TAG"}).then(res => {
      let {RESTAURANT_COMBO_TAG} = res.result;
      if(_productList && _productList.length > 0) {
        _productList.forEach(item => {
          if(item.tags && item.tags.length > 0) {
            let tagLabelList =[];
            item.tags.forEach(tagItem => {
              let {code} = tagItem;
              let findTag = RESTAURANT_COMBO_TAG.find(tagEnumItem => Number(tagEnumItem.code) === code);
              if(findTag) tagLabelList.push(findTag);
            });
            item.tagLabelList = tagLabelList;
          } else {
            item.tagLabelList = [];
          }
          console.log(item.tagLabelList,'itemTagLabelList');
        });
      }
      productList.value = _productList;
      console.log(productList,'productList');
    });
  };
  const queryProductList = async () => {
    await foodProductList({id:providerId.value}).then(res => {
      queryProductTags(res.result);
    });
  };
  const queryProviderDetail = async () => {
    await foodProviderDetail({id:providerId.value}).then(res => {
      providerInfoObj.value = res.result;
      queryProviderTags();
    });
  };
  const handleNavQualification = () => {
    let {entreDate,name,address,attaches,contactMobile,lat,lnt} = providerInfoObj.value;
    uni.navigateTo({
      url:`/foodSubPack/pages/foodProviderQualification/index?providerInfo=${encodeURIComponent(JSON.stringify({entreDate,name,address,attaches,contactMobile,lat,lnt}))}`
    })
  };
  const handlerCallPhone = () => {
    uni.makePhoneCall({
      phoneNumber:providerInfoObj.value.contactMobile
    })
  };
  const handlerOpenMap = () => {
    uni.openLocation({
      latitude: providerInfoObj.value.lat,
      longitude: providerInfoObj.value.lnt,
      name: providerInfoObj.value.name
    });
  };
  const navReservation = (item) => {
    let { id } = item;
    let { name } = providerInfoObj.value;
    uni.navigateTo({
      url:`/foodSubPack/pages/foodReservation/index?productId=${id}&providerId=${providerId.value}&providerName=${name}`
    })
  };
  const handlePreviewProductImgList = (item) => {
    let { headImageUrl,pictures } = item;
    let pictureList = pictures ? pictures.map(picture => picture.imgUrl) : [];
    console.log(pictureList,'pictureList');
    uni.previewImage({
      urls: [headImageUrl, ...pictureList]
    })
  };

  onLoad((options) => {
    let {
      providerId:_providerId
    } = options;
    providerId.value = _providerId;
    queryProductList();
    queryProviderDetail();

  });
</script>

<style lang="scss" scoped>
  .page-container {
    .content-container {
      height: 100vh;
      padding: 71rpx 0 0 0;
      background: linear-gradient(180deg, rgba(226,235,229,1) 0%, rgba(238,239,231,1)6%, rgb(238, 239, 231) 100%);
      .swiper-container {
        padding:0 27.5rpx;
        :deep(.custom-image) {
          border-radius: 10.5rpx;
        }
      }
      .provider-info-container {
        padding:0 27.5rpx;

        .provider-info-header {
          padding: 32rpx 0 28.5rpx 0;
          .provider-name {
            font-size: 39rpx;
            font-weight: bold;
            color: #2B2B24;
          }
        }
        .provider-address {
          font-size: 25rpx;
        }
        .provider-facility-container {
          .left-container {
            .provider-business-time {
              font-size: 25rpx;
              padding: 21.5rpx 0 13.5rpx 0;
            }
            .service-container {
              .service-item {
                font-size: 22.5rpx;
                padding: 7rpx 20rpx;
                margin-right:15rpx;
                border-radius: 6rpx;
                border: 1rpx solid #1B9C61;
              }
              .service-item:last-child {
                margin-right: 0;
              }
            }
          }
        }
        .map-container {
          height: 112rpx;
          margin-top: 34rpx;
          background-image: url("http://img.jowong.com/aba/2025-04-10/图层 891@2x_1744253830955.png");
          background-repeat: no-repeat;
          background-size: cover;
          .location-container {
            height: 100%;
            .left-container {
              .icon-a-jinrudituquandidingweiweizhi {
                color: #1b9c61;
                font-size: 40rpx;
              }
              text {
                font-size: 25rpx;
                margin-left: 7rpx;
              }
            }
            .right-container {
              width: 70%;
              max-height: 55rpx;
              font-size: 22.5rpx;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
      .product-container {
        padding: 0 24.5rpx;
        border-radius: 10rpx 10rpx 0 0;
        background: linear-gradient(180deg, rgba(250,251,248,1) 0%, rgba(244,245,240,1) 20%, rgba(238,239,231,1) 100%);
        .title {
          padding: 38rpx 0 36.5rpx 0;
          font-size: 39rpx;
          font-weight: bold;
        }
        .product-list {
          padding: 39.5rpx 32rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          .product-item {
            display: flex;
            width: 100%;
            height: 180rpx;
            padding: 30rpx 0 36rpx 0;
            border-bottom: 1rpx solid #C0C2B3;
            .product-img {
              width: 180rpx;
              height: 100%;
              border-radius: 7rpx;
            }
            .product-info-container {
              margin-left: 14.5rpx;
              padding-top: 13rpx;
              .product-basic-info {
                .product-name {
                  font-size: 29.5rpx;
                  font-weight: bold;
                  color: #2B2B24;
                }
                .product-service-container {
                  padding-top: 25rpx;
                  font-size: 19.5rpx;
                  color: #777777;
                }
              }
              .product-price-container {
                .price-container {
                  .sale-price {
                    font-size: 41.5rpx;
                    font-weight: bold;
                    color: #AA5414;
                  }
                  .sale-price:before {
                    font-size: 22.5rpx;
                    content: "￥";
                  }
                  .market-price {
                    font-size: 22.5rpx;
                    color: #777777;
                    text-decoration: line-through;
                  }
                }
                .buy-btn {
                  font-size: 33.5rpx;
                  padding: 18.5rpx 23.5rpx;
                  border-radius: 10rpx;
                  color: #FFFFFF;
                  background: #AA5414;
                }
              }
            }
          }
          .product-item:first-child {
            padding-top: 0;
          }
          .product-item:last-child {
            border: 0;
            padding-bottom: 0;
          }
        }
      }
    }
  }
</style>
